<script setup lang="ts">
import { computed, useTemplateRef } from 'vue';
import { useSect } from '../../../composables/use-sect';
import SectJoinConditionsModal from './join-conditions-modal.vue';
import ListView from './list.vue';
import SectVlew from './sect.vue';

const sectJoinConditionsModalRef = useTemplateRef('sectJoinConditionsModalRef');

const { state: sectState } = useSect();

const currentSect = computed(() => {
  return sectState.value.currentSect;
});

function onJoin(id: string) {
  sectJoinConditionsModalRef.value?.show(id);
}
</script>

<template>
  <div class="w-full h-full overflow-auto">
    <sect-vlew v-if="currentSect"></sect-vlew>
    <list-view v-else @join="onJoin"></list-view>
    <sect-join-conditions-modal
      ref="sectJoinConditionsModalRef"
    ></sect-join-conditions-modal>
  </div>
</template>
